<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- vue是什么
   概念：vue是一个用于构建用户界面的渐进式框架
   vue的两种使用方式：
   1.vue核心包开发
   场景：局部模块改造
   2.vue核心包&vue插件工程化开发
   场景：整站开发
    -->
  <!-- 创建vue实例，初始化渲染
   1.准备容器（VUE所管理的范围）
   2.引包（开发版本包/生产版本包）
   3.创建实例
   4.添加配置项 => 完成渲染 -->
   <div id="app">
    <!-- 这里将来会编写一些用于渲染的代码逻辑 -->
     {{msg}}
   </div>

   <!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
   <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

   <script>
    //一旦引入vuejs核心包，在全局环境，就有了vue构造函数
    const app = new Vue({
      //通过el配置选择器，指定vue管理的是哪个盒子
      el: '#app',
      //通过data提供数据
      data: {
        msg: 'hello'
      }
    })
   </script>
</body>
</html>